<script lang="ts" setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import { useDialog } from 'naive-ui';
import { forceLogout, myOnelineList } from '@/service/api/monitor/online';
import type { OnlineVO } from '@/service/types/monitor';
const onlineList = ref<Array<OnlineVO>>([]);
const dialog = useDialog();
const showOneline = ref<boolean>(false);
const getList = async () => {
  showOneline.value = true;
  const { data, error } = await myOnelineList();
  showOneline.value = false;
  if (!error) {
    onlineList.value = data.rows as Array<OnlineVO>;
  }
};
getList();
const handleForceLogout = (tokenId: string) => {
  dialog.warning({
    title: '警告',
    content: '你确定退出该用户吗',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const { error, data } = await forceLogout(tokenId);
      if (!error) {
        (window as any).message.success(data?.msg);
        getList();
      }
      // message.success('确定');
    },
    onNegativeClick: () => {
      (window as any).message.error('取消强退');
    }
  });
};
</script>

<template>
  <div class="h-100% min-h-430px flex-col-stretch gap-16px overflow-hidden p-24px lt-sm:overflow-auto">
    <div class="flex justify-between flex-items-center">
      <div>
        <div class="font-width-500 font-size-18px">安全设置</div>
        <div class="mt-8px font-size-12px text-gray-400">为账号设置</div>
      </div>
    </div>
    <NGrid cols="24" item-responsive responsive="screen" class="overflow-hidden">
      <NGridItem span="0 s:0 m:3 l:3 xl:3 2xl:3" class="text-gray-400">允许同时登录</NGridItem>
      <NGridItem span="24 s:24 m:21 l:21 xl:21 2xl:21" class="flex flex-col flex-gap-5px">
        <div>关闭后不允许在同类型设备（网页端、移动客户端）上同时登录</div>
        <div>
          <NSwitch :round="false">
            <template #checked>开启</template>
            <template #unchecked>关闭</template>
          </NSwitch>
        </div>
      </NGridItem>
    </NGrid>
    <NDivider />
    <NGrid cols="24" item-responsive responsive="screen" class="overflow-hidden">
      <NGridItem span="0 s:0 m:3 l:3 xl:3 2xl:3" class="text-gray-400">登录设备列表</NGridItem>
      <NGridItem span="24 s:24 m:21 l:21 xl:21 2xl:21" class="flex flex-col flex-gap-5px">
        <div>您当前已在以下设备上登录</div>
        <div class="">
          <NSpin :show="showOneline">
            <NList hoverable :show-divider="false">
              <NScrollbar>
                <NListItem
                  v-for="(item, index) in onlineList"
                  :key="index"
                  class="mt-10px border"
                  style="padding: 5px 10px 5px 10px"
                >
                  <template #suffix>
                    <NTooltip trigger="hover">
                      <template #trigger>
                        <NButton text @click="handleForceLogout(item?.tokenId)">
                          <template #icon>
                            <SvgIcon class="w-50px" icon="lets-icons:close-ring-light" />
                          </template>
                        </NButton>
                      </template>
                      强退
                    </NTooltip>
                  </template>
                  <div class="flex">
                    <NGrid cols="24" item-responsive responsive="screen" class="overflow-hidden">
                      <NGridItem span="0 s:0 m:8 l:8 xl:8 2xl:8" class="text-gray-400">
                        <NThing title="Windown">
                          <template #header>
                            <div class="text-14px font-bold">{{ item.os }}</div>
                          </template>
                          <template #description>
                            <div class="text-12px text-gray-400">{{ item?.browser }}</div>
                          </template>
                        </NThing>
                      </NGridItem>
                      <NGridItem span="24 s:24 m:8 l:8 xl:8 2xl:8">
                        <div class="h-full flex flex-center font-size-14px">
                          {{ dayjs(item.loginTime).format('YYYY-MM-DD HH:mm') }}
                        </div>
                      </NGridItem>
                      <NGridItem span="24 s:24 m:8 l:8 xl:8 2xl:8">
                        <div class="h-full flex flex-center font-size-14px">
                          {{ item.ipaddr }}({{ item.loginLocation }})
                        </div>
                      </NGridItem>
                    </NGrid>
                  </div>
                </NListItem>
              </NScrollbar>
            </NList>
          </NSpin>
        </div>
      </NGridItem>
    </NGrid>
  </div>
</template>

<style lang="scss" scoped></style>
